<template>
    <div id="myChange">
        <div class="card-container">
            <van-list :offset="0" v-model="loading" :finished="finished" :immediate-check="check" @load="onLoad"> 
            <!-- list -->
            <div class="card-box" v-for="(item,index) in listData" :key="index">
                <!-- 上 -->
                <div class="card-top" v-if="lang=='zh' ">
                    订单编号：{{item.order_code}}
                    <p>{{item.buyer_state_txt}}</p>
                </div>
                <div class="card-top" v-else>
                    Order number：{{item.order_code}}
                    <p>{{item.buyer_state_txt}}</p>
                </div>
                <!-- 中(有可能是多个) -->
                <div class="card-middle" v-for="(list,idx) in item.goodsList" :key="idx" @click="goDetails(item)">
                    <div class="img-box">
                       <img :src="list.head_img">
                    </div>
                    <dl>
                        <dt style="display:-webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;text-overflow: ellipsis;">{{list.title}}</dt>
                        <dd>￥{{list.goods_price}} <span>x{{list.goods_num}}</span></dd>
                    </dl>
                </div>
                <div class="card-bottom" v-if="lang=='zh' ">
                    {{item.create_time}}
                    <!-- 买家（发起置换方）状态：0待支付保证金、1已支付保证金、2已发货、3平台已收货、4平台已发货、5已收对方藏品、
                    * 6保证金已退回、7保证金没收、8申请撤销、9已关闭
                    * 
                    * 卖家（被发起置换方）状态：0待确认交易、1不同意置换、2同意置换待支付保证金、3已支付保证金、4已发货、5平台已收货、
                    * 6平台已发货、7已收对方藏品、8保证金已退回、9保证金没收、10申请撤销、11已关闭 -->
                    <div class="handle-box" @click="goDetails(item)">
                        <!-- 按钮  * 1.申请关闭交易  btn_applyClose * 2.支付保证金    btn_payBail  * 3.我要发货   btn_delivery   * 4.确认收货   btn_confirm   * 5.查看交易    btn_view -->
                        <p v-if="item.btn_applyClose == 1">申请关闭交易</p> 
                        <p class="look" v-if="item.btn_view == 1">查看交易</p>    
                        <p v-if="item.btn_delivery == 1">我要发货</p> 
                        <p v-if="item.btn_confirm == 1">确认收货</p>  
                        <p v-if="item.btn_payBail == 1">支付保证金</p> 

                    </div>
                </div>  
                <div class="card-bottom" v-if="lang=='en' ">
                    {{item.create_time}}
                    <div class="handle-box" @click="goDetails(item)">
                        <p v-if="item.btn_applyClose == 1">Apply to close</p> 
                        <p class="look" v-if="item.btn_view == 1">View</p>    
                        <p v-if="item.btn_delivery == 1">Deliver</p> 
                        <p v-if="item.btn_confirm == 1">Confirm</p>  
                        <p v-if="item.btn_payBail == 1">Pay bond</p>            
                    </div>
                </div>
                <div class="card-order" >
                    <i v-if="lang=='zh'">保证金：￥</i><i v-else >Bond：￥</i>{{item.seller_bond}}
                    <span class="red" v-if="item.color == 0">{{item.seller_state_txt}}</span>
                    <span v-if="item.color == 1">{{item.seller_state_txt}}</span>
                </div>
            </div>
        </van-list>
        <div class="nolist" v-if="finished && dataLength !=0 && lang =='zh'">没有更多数据</div>
        <div class="nolist" v-if="dataLength==0 && lang =='zh'">您还没有相关的订单</div>

         <div class="nolist" v-if="finished && dataLength !=0 && lang =='en'">No more data</div>
        <div class="nolist" v-if="dataLength==0 && lang =='en'">You do not have the relevant order yet.</div>
             <!-- loading -->
        <div class="loading-box" v-show="load">
            <van-loading type="spinner" color="white" />
        </div>
      </div>
    </div>
</template>

<script>
import { getmyExchangeList } from '@/api/my/myexchange'
import {getOrdersList,getOrdersDetails,postCloseOrder,postSureOrder,postSendExpress,postFinishExpress,} from '@/api/order/exchange'
import { Tab, Tabs, List, Toast,Dialog , Loading,} from "vant";
export default {
  name: "exchange",
  components: {
    [List.name]: List,
    [Toast.name]: Toast,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Dialog .name]: Dialog ,
    [Loading.name]: Loading,
  },
  //声明组件
  data() {
    return {
        lang:'zh',//当前网页语言类型 zh 中文  en 英语 
        userId: 0, //用户id
        type: 2, //类型：1已支付、2待支付、3已完成、4已取消
        pageIndex: 1, //默认显示第一页
        pageSize: 10, //一页显示5条数据
        loading: false, //加载状态
        finished: false, //是否已加载完成，加载完成后不再触发load事件
        check: false, //显示加载中提示文案
        listData: [],//取到的列表数据 用来传到子组件
        dataLength:0,//数据listData长度
        load: false, //加载提示框 是否显示

        /**
         * 按钮  
         * 1.申请关闭交易  btn_applyClose
         * 2.支付保证金    btn_payBail
         * 3.我要发货      btn_delivery
         * 4.确认收货      btn_confirm
         * 5.查看交易      btn_view
        */
        //按钮分类   0隐藏  1显示
        // btn_applyClose:0,
        // btn_payBail:0,
        // btn_delivery:0,
        // btn_confirm:0,
        // btn_view:0,

       /****订单所涉及的所有状态
       * 
       * 买家（发起置换方）状态：0待支付保证金、1已支付保证金、2已发货、3平台已收货、4平台已发货、5已收对方藏品、
       * 6保证金已退回、7保证金没收、8申请撤销、9已关闭
       * 
       * 卖家（被发起置换方）状态：0待确认交易、1不同意置换、2同意置换待支付保证金、3已支付保证金、4已发货、5平台已收货、
       * 6平台已发货、7已收对方藏品、8保证金已退回、9保证金没收、10申请撤销、11已关闭
       * 
       * ****/    
      
    };
  },
  created() {
    if(this.$route.query.userId && this.$route.query.userId > 0) {
        this.userId = this.$route.query.userId;
    } else {
        this.userId = window.localStorage.getItem("userId");
    }
    //获得语言类型lang
    if(this.$route.query.lang) {
        this.lang = this.$route.query.lang;
    }
    this.getList();//获取数据
  },
  methods: {
   //获得列表数据
      getList(){
        getmyExchangeList(this.userId,this.pageIndex,this.pageSize,this.lang).then(res => {
            console.log(res);
            // debugger;
            if (res.code == 200) {
                let newAry = [];
                let data = res.data.list;
                this.new = res.data.new;//数量
                this.$emit('upDate', this.new);//触发父组件upDate事件 改过新数据数
                data.forEach(element => {
                    //let _element = element;
                    let obj = {};
                    obj.create_time = element.submit_time;
                
                    obj.title = element.title;
                    obj.order_code = element.exchange_code;
                    obj.seller_bond = element.seller_bond;
                    obj.id = element.id;
                
                    obj.goodsList = element.goodsList;
                    //   obj.pay_money = element.pay_money;
                
                    obj.buyer_state = element.buyer_state;
                    obj.seller_state = element.seller_state;
                    //买家页面
                    // 买家（发起置换方）状态：0待支付保证金、1已支付保证金、2已发货、3平台已收货、4平台已发货、5已收对方藏品、
                    //* 6保证金已退回、7保证金没收、8申请撤销、9已关闭
                    //卖家（被发起置换方）状态：0待确认交易、1不同意置换、2同意置换待支付保证金、3已支付保证金、4已发货、5平台已收货、
                    //* 6平台已发货、7已收对方藏品、8保证金已退回、9保证金没收、10申请撤销、11已关闭

                    /**
                     * 按钮  
                     * 1.申请关闭交易  btn_applyClose
                     * 2.支付保证金    btn_payBail
                     * 3.我要发货      btn_delivery
                     * 4.确认收货      btn_confirm
                     * 5.查看交易      btn_view
                    */
                    //买家--发起置换方视角
                    //根据单方面卖家状态
                    if(element.seller_state == 0 && element.buyer_state <2){
                        //卖家未处理交易   等待平台通知对方  
                        // 此时按钮需要判断买家是否已支付保证金：
                        //1.未支付保证金：按钮开放“申请关闭交易”与“支付保证金”
                        //2.已支付保证金：按钮开放“申请关闭交易”与“查看订单”
                        if(this.lang == 'zh'){
                            obj.buyer_state_txt = "等待平台联系对方";
                        }else{
                            obj.buyer_state_txt = "Waiting for contact ";  
                        }
                        if(element.buyer_state == 0){
                            //买家未支付保证金   按钮： 申请关闭交易、支付保证金
                            obj.btn_applyClose = 1;
                            obj.btn_payBail = 1;
                        }else if(element.buyer_state == 1){
                            //买家已支付保证金  按钮：申请关闭交易、查看交易
                            obj.btn_applyClose = 1;
                            obj.btn_view = 1;
                        }
                    }else if(element.seller_state == 0 && element.buyer_state > 6){
                        //卖家未处理  买家申请关闭   按钮： 查看交易    
                        //买家可能有三种状态：7.保证金已退回，买家方已结束所有流程；8.申请撤销，买家方提出反悔且已支付保证金前提下；9.已关闭，买家未支付保证金申请关闭
                        if(this.lang == 'zh'){
                            obj.buyer_state_txt = "交易关闭"; 
                        }else{
                            obj.buyer_state_txt = "closed";  
                        }
                        obj.btn_view = 1;
                    }else if(element.seller_state == 1){
                        //卖家不同意置换   订单关闭   按钮： 查看交易  
                        if(this.lang == 'zh'){
                            obj.buyer_state_txt = "交易关闭"; 
                        }else{
                            obj.buyer_state_txt = "closed";  
                        }
                        obj.btn_view = 1;
                    }else if(element.seller_state == 2 && (element.buyer_state <7)){
                        //卖家同意置换未支付保证金    买家愿意继续交易  
                         if(this.lang == 'zh'){
                            obj.buyer_state_txt = "对方已同意置换";
                        }else{
                            obj.buyer_state_txt = "agreed";  
                        }
                        if(element.buyer_state == 0){
                            //买家未支付保证金   按钮：  申请关闭交易   支付保证金
                            obj.btn_applyClose=1;
                            obj.btn_payBail=1;
                        }else if(element.buyer_state == 1){
                            //买家已支付保证金  按钮： 申请关闭交易   查看交易
                            obj.btn_applyClose=1;
                            obj.btn_view=1;
                        }
                    }else if(element.seller_state == 2 && (element.buyer_state == 7 || element.buyer_state == 9)){
                        //卖家同意置换未支付保证金     买家保证金已没收或者订单状态为已关闭      按钮：   查看交易   
                         if(this.lang == 'zh'){
                            obj.buyer_state_txt = "交易关闭";
                        }else{
                            obj.buyer_state_txt = "closed";  
                        }
                        obj.btn_view = 1;
                    }else if(element.seller_state == 2 && (element.buyer_state == 8)){
                        //卖家同意置换未支付保证金     买家申请交易关闭    按钮：   查看交易
                        if(this.lang == 'zh'){
                            obj.buyer_state_txt = "申请关闭中"; 
                        }else{
                            obj.buyer_state_txt = "Apply to close";  
                        }
                        obj.btn_view = 1;
                    }else if(element.seller_state == 3 && (element.buyer_state == 1 || element.buyer_state == 2 || element.buyer_state == 3)){
                        //卖家同意置换已支付保证金  但未发货  并且 买家--即本视角已支付保证金或者已发货    此时 卖家开放“我要发货”按钮---即---买家获取“等待对方发货”信息    同时  买家也开放“我要发货”按钮
                        if(this.lang == 'zh'){
                            obj.buyer_state_txt = "等待对方发货";
                        }else{
                            obj.buyer_state_txt = "Waiting for delivery";  
                        }
                        if(element.buyer_state == 1){
                            //买家已支付保证金未发货  按钮：申请关闭交易   我要发货
                            obj.btn_applyClose = 1;
                            obj.btn_delivery = 1;
                        }else if(element.buyer_state == 2 || element.buyer_state == 3){
                            //买家已发货   并且卖家未发货   此时买家不允许申请关闭交易  按钮：  查看交易
                            obj.btn_view = 1;
                        }
                    }else if(element.seller_state == 3 && element.buyer_state == 0){
                        //卖家同意置换已支付保证金  并且 买家--即本视角未支付保证金    此时 买家开放“申请关闭交易  支付保证金”按钮
                        if(this.lang == 'zh'){
                            obj.buyer_state_txt = "对方已支付保证金";
                        }else{
                            obj.buyer_state_txt = "Seller has paid the deposit";  
                        }
                        obj.btn_applyClose = 1;
                        obj.btn_payBail = 1;
                    }else if(element.seller_state == 4 && element.buyer_state <2){
                        //卖家已发货   此时买家方按钮需要判读买家是否已发货：1.买家未发货：买家获取”对方已发货“信息，开放“申请关闭交易 我要发货”按钮   2.买家已发货：买家获取“双方已发货”信息，开放“查看订单”交易
                        //1.卖家已发货   买家未发货   “对方已发货”    注：我的置换：哪方发货，这一方就不可申请关闭交易，如果对方没有发货，对方可申请关闭交易
                        if(this.lang == 'zh'){
                            obj.buyer_state_txt = "对方已发货";
                        }else{
                            obj.buyer_state_txt = "shipped ";  
                        }
                        if(element.buyer_state == 0){
                            //买家未支付保证金  按钮：  申请关闭   支付保证金
                            obj.btn_applyClose = 1;
                            obj.btn_payBail = 1;
                        }else if(element.buyer_state == 1){
                            //买家已支付保证金  按钮：  申请关闭交易  我要发货
                            obj.btn_applyClose = 1;
                            obj.btn_delivery = 1;
                        }
                    }else if(element.seller_state == 4 && (element.buyer_state ==2 || element.buyer_state == 3)){
                        //卖家已发货   此时买家方按钮需要判读买家是否已发货：1.买家未发货：买家获取”对方已发货“信息，开放”申请关闭交易”和“我要发货”按钮   2.买家已发货：买家获取“双方已发货”信息，开放“查看订单”交易
                        //2.卖家已发货   买家已发货||买家所发的藏品已被平台验收   “双方已发货”    注：我的置换：哪方发货，这一方就不可申请关闭交易，如果对方没有发货，对方可申请关闭交易
                        if(this.lang == 'zh'){
                            obj.buyer_state_txt = "双方已发货";
                        }else{
                            obj.buyer_state_txt = "shipped both";  
                        }
                        obj.btn_view = 1;
                    }else if(element.seller_state == 5 && (element.buyer_state ==2 || element.buyer_state == 3)){
                        //卖家所发的藏品   平台已验收 买家也已发货  按钮  买家开放“查看交易”按钮   
                        if(this.lang == 'zh'){
                            obj.buyer_state_txt = "平台已验收";
                        }else{
                            obj.buyer_state_txt = "Platform accepted";  
                        }
                        obj.btn_view = 1;
                    }else if(element.seller_state == 5 && element.buyer_state == 1){
                        //卖家所发的藏品   平台已验收 买家还未发货  按钮  买家开放“申请关闭交易    我要发货”按钮   
                        if(this.lang == 'zh'){
                            obj.buyer_state_txt = "平台已验收";
                        }else{
                            obj.buyer_state_txt = "Platform accepted";  
                        }
                        obj.btn_applyClose = 1;
                        obj.btn_delivery = 1;
                    // 买家（发起置换方）状态：0待支付保证金、1已支付保证金、2已发货、3平台已收买家货、4平台已发货（给买家）、5已收对方藏品、
                    //* 6保证金已退回、7保证金没收、8申请撤销、9已关闭
                    //卖家（被发起置换方）状态：0待确认交易、1不同意置换、2同意置换待支付保证金、3已支付保证金、4已发货、5平台已收卖家货、
                    //* 6平台已发货（给卖家）、7已收对方藏品、8保证金已退回、9保证金没收、10申请撤销、11已关闭
                    }else if(element.seller_state >4 && element.seller_state <9 && element.buyer_state ==4){
                        //卖家所发的藏品   平台已发货   按钮： 买家开放“确认收货”按钮
                        //买家还未收货
                        if(this.lang == 'zh'){
                            obj.buyer_state_txt = "平台已发货";
                        }else{
                            obj.buyer_state_txt = "Platform shipped";  
                        }
                        obj.btn_confirm = 1;
                    }else if(element.buyer_state == 5 || element.buyer_state == 6){
                        //买方已确认收货  保证金在退还状态  或者已退回   按钮：  查看交易
                        if(this.lang == 'zh'){
                            obj.buyer_state_txt = "交易完成";
                        }else{
                            obj.buyer_state_txt = "done";  
                        }
                        obj.btn_view = 1;
                    }else if(element.buyer_state == 7){
                        //买家页面
                    // 买家（发起置换方）状态：0待支付保证金、1已支付保证金、2已发货、3平台已收货、4平台已发货、5已收对方藏品、
                    //* 6保证金已退回、7保证金没收、8申请撤销、9已关闭
                    //卖家（被发起置换方）状态：0待确认交易、1不同意置换、2同意置换待支付保证金、3已支付保证金、4已发货、5平台已收货、
                    //* 6平台已发货、7已收对方藏品、8保证金已退回、9保证金没收、10申请撤销、11已关闭

                    /**
                     * 按钮  
                     * 1.申请关闭交易  btn_applyClose
                     * 2.支付保证金    btn_payBail
                     * 3.我要发货      btn_delivery
                     * 4.确认收货      btn_confirm
                     * 5.查看交易      btn_view
                    */
                        //买家保证金被没收  买家过错方   交易关闭
                        if(this.lang == 'zh'){
                            obj.buyer_state_txt = "交易关闭"; 
                        }else{
                            obj.buyer_state_txt = "closed";  
                        }
                        obj.btn_view = 1;
                    // }
                    // else if(element.seller_state == 8  && element.buyer_state <7){
                    //     //卖方保证金已退回   1.买方未关闭交易     交易完成   2.买方申请关闭交易    交易关闭
                    //     //1.买方未关闭交易
                    //     if(this.lang == 'zh'){
                    //         obj.buyer_state_txt = "交易完成";
                    //     }else{
                    //         obj.buyer_state_txt = "done";  
                    //     }
                    //     obj.btn_view = 1;
                    }else if(element.seller_state == 8  && (element.buyer_state == 7 ||element.buyer_state == 8 || element.buyer_state == 9)){
                        //卖方保证金已退回   1.买方未关闭交易     交易完成   2.买方申请关闭交易    交易关闭
                        //2.买方申请关闭交易    交易关闭
                        if(this.lang == 'zh'){
                            obj.buyer_state_txt = "交易关闭";  //对方不同意置换关闭/用户关闭
                        }else{
                            obj.buyer_state_txt = "closed";  
                        }
                        obj.btn_view = 1;
                    }else if(element.seller_state == 9  || element.seller_state == 11){
                        //卖方保证金被没收   交易关闭
                        //卖方状态为易关闭   交易关闭
                        if(this.lang == 'zh'){
                            obj.buyer_state_txt = "交易关闭";  //对方不同意置换关闭/用户关闭
                        }else{
                            obj.buyer_state_txt = "closed";  
                        }
                        obj.btn_view = 1;
                    }else if(element.seller_state == 10){
                        //卖方申请撤销   交易关闭中
                        if(this.lang == 'zh'){
                            obj.buyer_state_txt = "申请关闭中";  //对方不同意置换关闭/用户关闭
                        }else{
                            obj.buyer_state_txt = "Apply to close";  
                        }
                        obj.btn_view = 1;
                    }

                    

                    //买卖双方返回订单状态  保证金状态  具体参考上面注释
                    if(element.buyer_state == 0 || (element.buyer_state == 9 && (element.seller_state == 0|| element.seller_state ==1))){
                        if(this.lang =='zh'){
                            obj.seller_state_txt = "未支付";
                        }else{
                            obj.seller_state_txt = "Unpaid";
                        }
                        obj.color = 0;   //0红色字体    1绿色字体
                    }else if(element.buyer_state == 7){
                        if(this.lang =='zh'){
                            obj.seller_state_txt = "已没收";
                        }else{
                            obj.seller_state_txt = "Confiscated";
                        }
                        obj.color = 0;   //0红色字体    1绿色字体
                    }else if(element.buyer_state == 6){
                        if(this.lang =='zh'){
                            obj.seller_state_txt = "已退回";
                        }else{
                            obj.seller_state_txt = "Returned";
                        }
                        obj.color = 1;   //0红色字体    1绿色字体
                    }else if(element.buyer_state !=0 && element.buyer_state <5&& element.seller_state < 9 && element.seller_state !=1){
                        if(this.lang =='zh'){
                            obj.seller_state_txt = "已支付";
                        }else{
                            obj.seller_state_txt = "Paid";
                        }
                        obj.color = 1;   //0红色字体    1绿色字体
                    }else if(element.buyer_state == 8 && (element.seller_state == 0 || element.seller_state == 2 || element.seller_state == 3 || element.seller_state == 11)){
                        //发起置换方 支付保证金后申请撤销交易   保证金要被没收
                        if(this.lang =='zh'){
                            obj.seller_state_txt = "冻结中";
                        }else{
                            obj.seller_state_txt = "Freezing";
                        }
                        obj.color = 0;   //0红色字体    1绿色字体
                    }else{
                        if(this.lang =='zh'){
                            obj.seller_state_txt = "冻结中";
                        }else{
                            obj.seller_state_txt = "Freezing";
                        }
                        obj.color = 0;   //0红色字体    1绿色字体
                    }
                    newAry.push(obj);
                });
                //判断有没有数据了
                if(newAry.length>0){//有数据
                    this.listData = this.listData.concat(newAry);
                    this.loading = false;
                }else{//没有数据
                    this.finished = true;
                    this.loading = false;
                }
                console.log(this.listData); 
                this.dataLength = this.listData.length; 
                this.load = false;
            } else {
                Toast(res.msg);
            }
        });
      }, 
    onLoad() {
      let _this = this;
        //  console.log("触发");
        _this.pageIndex++;//每触发一次 +1
            setTimeout(() => {
                _this.getList();
        }, 500);
    },
    //跳转到详情页
    goDetails(item){
        var _id = item.id;
        var buyer_state = item.buyer_state;//买家状态
        var seller_state = item.seller_state;//卖家状态
        
        var para = {};
		var title ='';
        if(this.lang == 'zh')
            title = '订单详情';
        else
            title = 'Order Details';
		para.title = title;//必须参数
		para.id = _id;//要跳转对象的id 不是必须参数
        // 买家（发起置换方）状态：0待支付保证金、1已支付保证金、2已发货、3平台已收货、4平台已发货、5已收对方藏品、
        //* 6保证金已退回、7保证金没收、8申请撤销、9已关闭
        //被置换方：0待确认交易、1不同意置换、2同意置换待支付保证金、3已支付保证金、4已发货、
        //5平台已收货、6平台已发货、7已收对方藏品、8保证金已退回、9保证金没收、10申请撤销、11已关闭
        
        //根据不同状态跳转到不同的详情页面
        //1.跳转到支付保证金页面  支付保证金/等待平台联系对方   被置换方未处理
        if(( buyer_state == 1 &&  seller_state == 0) || (item.seller_state == 0 || item.seller_state == 2 || item.seller_state ==3) && item.buyer_state == 0 ){ 
            para.url = "/changepayBail?id="+_id+"&lang="+this.lang+"&userId="+this.userId; //必须参数 后面需要拼接h5所需参数，如:lang=zh,等等 
        }
        //2.订单详情
        else{
             para.url = "/mychangeDetail?id="+_id+"&lang="+this.lang+"&userId="+this.userId; //必须参数 后面需要拼接h5所需参数，如:lang=zh,等等 
        }
        console.log(para,'para')
        this.interaction.hLink(para);
    },
  }
};
</script>
<style lang="stylus" scoped>
#myChange{
    background :#f1f1f1;
}
.card-box{
    background: #fff;
    margin-bottom :.186667rem;
    padding-bottom :0;
    border-bottom: 1px solid #f1f1f1;
    // 上
    .card-top{
        height :1.013333rem;
        line-height :1.013333rem;
        font-size:.32rem;
        padding:0 .213333rem;
        color:#a2a2a2;
        p{
            color:#cb9c57;
            float:right;
        }
    }
    // 中
    .card-middle{
        overflow:hidden;
        background:#f5f5f5;
        padding:.266667rem;
        margin-bottom :.133333rem;
        .img-box{
            width :2.133333rem;
            height :2.133333rem;
            float:left;
            position:relative;
            img{
                width :100%;
                margin :0;
                height 100%;
            }
        }
        dl{
            float:left;
            width :73%;
            margin-left :3.3%
            position :relative;
            height: 2.133333rem;
            dt{
                font-family:PingFangSC-Regular;
                font-size:.373333rem;
                color:#494949;
                letter-spacing:.008rem;
                line-height:.533333rem;
                text-align:left;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                overflow: hidden;
            }
             dd{
                position:absolute;
                bottom :0;   
                font-family:PingFangSC-Medium;
                font-size:13px;
                color:#cb9c57;
                letter-spacing:0;
                text-align:left;
                width :100%;
                span{
                    font-family:PingFangSC-Regular;
                    font-size:.346667rem;
                    color:#2d2d2d;
                    letter-spacing:0;
                    text-align:right;
                    position:absolute;
                    right :0;
                }             
            }
        }
    }
    .card-middle:last-child{
        margin:0;
    }
    // 下
    .card-bottom{
        border-bottom: 1px solid #f5f5f5;
        overflow: hidden;
        padding:0 .266667rem;
        height :1.013333rem;
        line-height :1.013333rem;
        box-sizing :border-box;
        font-family:PingFangSC-Regular;
        font-size:.346667rem;
        position:relative;
        color:#cb9c57;
        .handle-box{
            position:absolute;
            right:.266667rem;
            top:0;
            height: 1.013333rem;
          
            p{
                float:left;
                margin-left :.533333rem;
                font-size:.346667rem;
            }
            p:last-child{
                background:#cb9c57;
                border-radius:100px;
                //width:2.213333rem;
                padding:0 .266667rem;
                height:.693333rem;
                text-align :center;
                line-height :.693333rem;
                font-family:PingFangSC-Medium;
                color:#ffffff;
                margin-top :.16rem;
            }
            p.look{
                color:#cb9c57;
                background:#ffffff;
                border:1px solid #cb9c57;
                border-radius:100px;
                //width:2.16rem;
                font-family:PingFangSC-Regular;
                font-size:.346667rem;
                color:#cb9c57;
                text-align:center;
                height:.64rem;
                line-height :.64rem;
                  padding: 0 0.266667rem;
                margin-top: 0.16rem;
            }

        }
    }
    // 下
    .card-order{
        padding:0 .266667rem;
        height :1.013333rem;
        line-height :1.013333rem;
        font-family:PingFangSC-Medium;
        font-size:.346667rem;
        span{
            font-family:PingFangSC-Regular;
            font-size:.346667rem;
            float:right;
            color:#58a701;
            &.yellow{
                 color:#cb9c57;
            }
            &.red{
              color:#d84053;
            }
            &.yue{
              color:#d84053;
            }
        }
    }
}
.nolist{
	font-size: 0.32rem;
	color: #A2A2A2;
	text-align: center;
	padding: 0.533333rem 0;
}

.loading-box{
    width :50px;
    height :50px;
    border-radius :3px;
    background :rgba(0,0,0,.5);
    position :fixed;
    left :50%;
    top:50%;
    margin-left:-25px;
    margin-top :-25px;
    z-index :999999;
    text-align :center;
    vertical-align :middle;
    .van-loading{
       left :50%;
       top:50%;
       margin-left :-15px;
       margin-top :-15px;
    }
}
</style>






